/**
 * Created by 李启明 on 2017/3/16.
 */
window.onload = function () {
    var video = document.getElementById("btn_video");
    var hengfu = document.getElementById("hengfu");
    var json1 = {top: 235, left: 385};
    var json2 = {top: 200};


    //播放按钮
    animate(video, json1, function () {
        animate(video, json2, function () {
            animate(video, json1)
        })
    });
    //横幅
    animate(hengfu, json1, function () {
        animate(hengfu, json2, function () {
            animate(hengfu, json1)
        })
    });

    //盒子部分
    $('.hezi').find('li').show(1000);
    $('.hezi').find('li').mouseenter(function () {
        $(this).siblings().fadeToggle(500, function () {
            $(this).stop(true).fadeToggle();
        })
    })


    /*上下晃动*/
    auto(".hezi");

    function auto(ele){
        $(ele).animate({top:475},1888, function () {
            $(this).animate({top:435},1888, function () {
                auto(ele)
            })
        })
    }

    /*上下晃动*/

    //花瓣下落
    var minSize = 5;
    var maxSize = 20;
    var flower = $('<div></div>').css({
        'position': 'absolute',
        'top': '0'
    }).html('<img src="images/flower.png" alt=""/>');
    $(function () {
        var bodyY = $(document).height();
        var bodyX = $(document).width();
        setInterval(function () {
            var topLeft = Math.random() * bodyX;
            var topOpacity = 0.7 + Math.random() * 0.3;
            var bottomTop = bodyY;
            var bottomLeft = Math.random() * bodyX;
            var speed = 8000 + Math.random() * 8000;
            var sSize = minSize + maxSize * Math.random() + 10;
            flower.clone().appendTo('body').css({
                'left': topLeft - 60,
                'opacity': topOpacity,
                'font-size': sSize
            }).animate({
                'top': bottomTop - 60,
                'left': bottomLeft - 60,
                'opacity': 0.5
            }, speed, function () {
                $(this).remove();
            });//清除div防止过多
        }, 2000);
    });


    function animate(ele, json, fn) {
        //要用定时器，先清定时器
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            //默认所有人都到了目标位置。(开闭原则)
            var flag = true;

            for (var k in json) {
                //在for循环中进行属性判断：如果是哪个属性，就进行哪个属性的逻辑
                if (k === "z-index") {
                    //层级：需求：点击一下，直接到达(层级不需要缓动到目标值)
                    ele.style.zIndex = json[k];//层级不管定时器
                } else if (k === "opacity") {//透明度
                    //0.获取值的时候放大10倍，赋值在缩小10倍(方便步长运算)。 1.小数运算容易出现精度丢失问题。
                    if (parseInt(getStyle(ele, k) * 100) === 0) {
                        var leader = 0;
                    } else {
                        var leader = parseInt(getStyle(ele, k) * 100) || 100;
                    }
                    //1.获取步长(传递的目标值为多少)
                    var step = (parseInt(json[k] * 100) - leader) / 10;
                    //2.二次处理步长
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    //3.赋值
                    leader += step;
                    //赋值opacity的时候注意缩小10倍,没有单位
                    ele.style.opacity = leader / 100;
                    //兼容ie678
                    ele.style.filter = "alpha(opacity=" + leader + ")";

                    //有一个没有到达目标位置的也不能清除定时器
                    if (parseInt(json[k] * 100) !== leader) {
                        flag = false;
                    }
                } else {//普通属性。
                    //0.获取盒子当前最高权限的属性值,要转换成number类型。
                    var leader = parseFloat(getStyle(ele, k)) || 0;
                    //1.获取步长
                    var step = (json[k] - leader) / 10;
                    //2.二次处理步长
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    //3.赋值
                    leader += step;
                    ele.style[k] = leader + "px";
                    //有一个没有到达目标位置的也不能清除定时器
                    if (json[k] !== leader) {
                        flag = false;
                    }
                }
            }
            //整轮for循环执行完毕之后，只要判断：flag的值是true，还是false。
            if (flag) {
                clearInterval(ele.timer);
                //本函数走完了，在调用回调函数：规则就是，你完成我在执行
                if (fn) {
                    fn();
                }
            }
        }, 40);
    }
    //精确获取单个元素的某个最高权限属性值。
    function getStyle(ele, attr) {
        if (window.getComputedStyle !== undefined) {
            return window.getComputedStyle(ele, null)[attr];
        } else {
            return ele.currentStyle[attr];
        }
    }
}